<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            /* 添加边框 */
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>欢迎光临_vue开发的收银系统_水果店</h3>
        <table>
            <tr>
                <th>
                    苹果{{price}}￥/斤，折扣
                    <{{discount}}折>
                </th>
            </tr>
            <tr>
                <th>
                    请输入你要购买的斤数
                    <input v-model="buyNum" type="number">
                </th>
            </tr>
            <tr>
                <th> <button @click="buy">结账买单~</button></th>
            </tr>
            <tr v-show="isShow">
                <th>结账单:总价{{sumNum}}￥元 折后价:{{discountedPrice}}￥元 省了:{{lowPrice}}￥元</th>
            </tr>

        </table>



    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                price: 10,
                discount: 8,
                buyNum: 2,
                isShow: false
            },
            computed: {
                sumNum() {
                    return this.price * this.buyNum
                },
                discountedPrice() {
                    return this.sumNum * this.discount / 10
                },
                lowPrice() {
                    return this.sumNum - this.discountedPrice
                }
            },
            methods: {
                buy() {
                    this.isShow = true
                }
            }
        })
    </script>
</body>

</html>